<template>
  <view class="create-container">
    <!-- 模式选择区域 -->
    <view class="mode-selector">
      <view 
        class="mode-item" 
        :class="{ 'mode-active': createMode === 'single' }"
        @click="switchMode('single')"
      >
        <text class="mode-icon">🖼️</text>
        <text class="mode-name">单图AI处理</text>
      </view>
      <view 
        class="mode-item" 
        :class="{ 'mode-active': createMode === 'album' }"
        @click="switchMode('album')"
      >
        <text class="mode-icon">📚</text>
        <text class="mode-name">图片专辑</text>
      </view>
    </view>
    
    <!-- 单图模式 -->
    <block v-if="createMode === 'single'">
      <!-- 上传图片区域 -->
      <view class="upload-area">
        <view class="upload-title">上传图片</view>
        <view class="upload-box" @click="chooseSingleImage" v-if="!singleImageUrl">
          <text class="upload-icon">+</text>
          <text class="upload-text">点击上传图片</text>
          <text class="upload-desc">上传单张图片进行AI风格处理</text>
        </view>
        
        <!-- 单图预览 -->
        <view class="image-preview" v-else>
          <image :src="singleImageUrl" mode="aspectFit" class="preview-image"></image>
          <view class="preview-actions">
            <button class="action-btn" @click="chooseSingleImage">重新上传</button>
            <button class="action-btn delete-btn" @click="singleImageUrl = ''">删除图片</button>
          </view>
        </view>
      </view>

      <!-- 风格选择区域 - 单图模式下显示 -->
      <view class="style-area" v-if="singleImageUrl">
        <view class="style-title">选择风格</view>
        
        <!-- 风格分类选项卡 -->
        <scroll-view scroll-x class="style-tabs">
          <view 
            v-for="(category, index) in styleCategories" 
            :key="index" 
            class="tab-item" 
            :class="{ active: currentCategory === category.id }"
            @click="currentCategory = category.id"
          >
            {{ category.name }}
          </view>
        </scroll-view>
        
        <!-- 风格列表 -->
        <view class="style-list">
          <view 
            v-for="(style, index) in filteredStyles" 
            :key="index" 
            class="style-item"
            :class="{ selected: selectedStyles.includes(style.id) }"
            @click="toggleStyle(style.id)"
          >
            <image v-if="style.previewImage" :src="style.previewImage" mode="aspectFill" class="style-preview"></image>
            <view class="style-name">{{ style.name }}</view>
          </view>
        </view>
        
        <!-- 已选择的风格展示 -->
        <view class="selected-styles" v-if="selectedStyles.length > 0">
          <view class="selected-title">已选择 ({{ selectedStyles.length }})</view>
          <view class="selected-list">
            <view 
              v-for="(styleId, index) in selectedStyles" 
              :key="index" 
              class="selected-style"
            >
              {{ getStyleName(styleId) }}
              <text class="remove-style" @click="toggleStyle(styleId)">×</text>
            </view>
          </view>
        </view>
        
        <!-- 热门组合推荐 -->
        <view class="popular-combinations">
          <view class="popular-title">热门组合</view>
          <scroll-view scroll-x class="combinations-list">
            <view 
              v-for="(combo, index) in popularCombinations" 
              :key="index" 
              class="combo-item"
              @click="applyCombo(combo)"
              :class="{'combo-item-active': selectedComboId === combo.id}"
            >
              <view class="combo-name">{{ combo.name }}</view>
              <view class="combo-count">已使用{{ combo.useCount }}次</view>
              <view v-if="selectedComboId === combo.id" class="combo-selected">已选择</view>
            </view>
          </scroll-view>
        </view>
        
        <!-- 生成按钮 -->
        <view class="generate-area">
          <button 
            class="generate-btn" 
            :disabled="selectedStyles.length === 0 || isGenerating || !singleImageUrl" 
            @click="generateSingleImage"
          >
            {{ isGenerating ? '生成中...' : '开始生成' }}
          </button>
        </view>
      </view>
    </block>
    
    <!-- 专辑模式 -->
    <block v-if="createMode === 'album'">
      <!-- 上传图片区域 -->
      <view class="upload-area">
        <view class="upload-title">创建图片专辑</view>
        <view class="upload-box" @click="chooseAlbumImages" v-if="albumImages.length === 0">
          <text class="upload-icon">+</text>
          <text class="upload-text">点击上传图片</text>
          <text class="upload-desc">可上传多张图片，形成专辑</text>
        </view>
        
        <!-- 多图预览区域 -->
        <view class="image-album" v-if="albumImages.length > 0">
          <view class="album-title">我的专辑 ({{albumImages.length}}张)</view>
          <view class="album-grid">
            <view 
              v-for="(item, index) in albumImages" 
              :key="index" 
              class="album-item"
              :class="{ 'album-item-active': currentAlbumIndex === index }"
              @click="selectAlbumImage(index)"
            >
              <image :src="item.tempUrl" mode="aspectFill" class="album-image"></image>
              <view class="album-item-overlay" v-if="currentAlbumIndex === index">
                <view class="album-item-selected">✓</view>
              </view>
              <view class="album-item-number">{{index + 1}}</view>
              <view class="album-item-delete" @click.stop="removeAlbumImage(index)">
                <text class="delete-icon">×</text>
              </view>
            </view>
            
            <!-- 添加更多图片按钮 -->
            <view class="album-add" @click="chooseAlbumImages">
              <text class="add-icon">+</text>
              <text class="add-text">添加</text>
            </view>
          </view>
        </view>
        
        <!-- 当前选中图片的大预览 -->
        <view class="current-preview" v-if="currentAlbumImage">
          <image :src="currentAlbumImage.tempUrl" mode="aspectFit" class="preview-image"></image>
        </view>
        
        <!-- 专辑操作区域 -->
        <view class="album-actions">
          <button class="album-btn preview" @click="previewAlbum">
            <text class="btn-icon">👁️</text>
            <text class="btn-text">预览专辑</text>
          </button>
          <button class="album-btn save" @click="saveAlbum">
            <text class="btn-icon">💾</text>
            <text class="btn-text">保存专辑</text>
          </button>
        </view>
      </view>
    </block>
    
    <!-- 保存专辑确认弹窗 -->
    <view class="save-modal" v-if="showSaveAlbumForm">
      <view class="modal-content">
        <view class="modal-header">
          <text class="modal-title">保存专辑</text>
          <text class="modal-close" @click="showSaveAlbumForm = false">×</text>
        </view>
        <view class="modal-body">
          <view class="form-item">
            <text class="form-label">标题</text>
            <input class="form-input" v-model="albumForm.title" placeholder="请输入专辑标题" />
          </view>
          <view class="form-item">
            <text class="form-label">描述</text>
            <textarea class="form-textarea" v-model="albumForm.description" placeholder="请输入专辑描述" />
          </view>
          <view class="form-item">
            <text class="form-label">是否公开</text>
            <switch :checked="albumForm.isPublic" @change="albumForm.isPublic = $event.detail.value" color="#FF69B4" />
          </view>
        </view>
        <view class="modal-footer">
          <button class="modal-btn" @click="showSaveAlbumForm = false">取消</button>
          <button class="modal-btn primary" @click="submitSaveAlbum">保存</button>
        </view>
      </view>
    </view>
    
    <!-- 任务进度展示 -->
    <view class="task-progress" v-if="taskId && taskStatus">
      <view class="progress-title">任务进度</view>
      <view class="progress-status">
        <text class="status-text">{{ getStatusText() }}</text>
        <progress 
          :percent="getProgressPercent()" 
          stroke-width="4" 
          activeColor="#FF69B4"
        />
      </view>
      
      <!-- 生成结果展示 -->
      <view class="result-preview" v-if="taskStatus === 'completed'">
        <view class="result-title">生成结果</view>
        <view class="result-image">
          <image :src="resultImageUrl" mode="aspectFit"></image>
        </view>
        <view class="result-actions">
          <button class="action-btn" @click="saveToAlbum">保存到相册</button>
          <button class="action-btn" @click="shareImage">分享作品</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { imageApi, styleApi, taskApi, feedApi } from '../../utils/api';

export default {
  data() {
    return {
      // 当前创建模式：single（单图）或album（专辑）
      createMode: 'single',
      
      // 单图模式下当前选中的图片URL
      singleImageUrl: '',
      
      // 专辑模式下当前选中的图片索引
      currentAlbumIndex: 0,
      
      // 专辑模式下当前选中的图片
      currentAlbumImage: null,
      
      // 专辑模式下图片列表
      albumImages: [],
      
      // 是否显示保存专辑表单
      showSaveAlbumForm: false,
      
      // 专辑表单数据
      albumForm: {
        title: '我的专辑',
        description: '图片专辑',
        isPublic: true
      },
      
      // 当前选中的风格分类ID
      currentCategory: 1,
      
      // 已选择的风格ID列表
      selectedStyles: [],
      
      // 任务ID
      taskId: '',
      
      // 批量任务ID（用于多图处理）
      batchTaskId: '',
      
      // 任务状态：waiting, processing, completed
      taskStatus: '',
      
      // 是否正在生成中
      isGenerating: false,
      
      // 生成结果图片URL
      resultImageUrl: '',
      
      // 批量任务结果图片URL列表
      resultImageUrls: [],
      
      // 风格分类数据（将通过API获取）
      styleCategories: [],
      
      // 风格数据（将通过API获取）
      styles: [],
      
      // 热门组合推荐（将通过API获取）
      popularCombinations: [],
      selectedComboId: ''
    }
  },
  
  computed: {
    // 根据当前选中的分类过滤风格
    filteredStyles() {
      return this.styles.filter(style => style.categoryId === this.currentCategory);
    },
    
    // 是否有图片需要AI处理
    hasImageToProcess() {
      return this.albumImages.some(image => image.applyAI);
    }
  },
  
  created() {
    // 页面创建时加载风格分类和风格数据
    this.loadStyleCategories();
    this.loadStyles();
    this.loadPopularCombinations();
  },
  
  onShow() {
    // 检查本地存储中是否有选定的风格ID
    const selectedStyleId = uni.getStorageSync('selectedStyleId');
    if (selectedStyleId) {
      console.log('检测到选定的风格ID:', selectedStyleId);
      // 加载选定的风格
      this.loadStyleById(selectedStyleId);
      // 使用后清除，避免下次进入页面时自动加载
      uni.removeStorageSync('selectedStyleId');
    }
  },
  
  methods: {
    // 切换创建模式
    switchMode(mode) {
      this.createMode = mode;
    },
    
    // 加载风格分类
    loadStyleCategories() {
      styleApi.getStyleCategories()
        .then(res => {
          if (res.code === 200) {
            this.styleCategories = res.data;
            // 默认选中第一个分类
            if (this.styleCategories.length > 0) {
              this.currentCategory = this.styleCategories[0].id;
            }
          } else {
            uni.showToast({
              title: '获取风格分类失败',
              icon: 'none'
            });
          }
        })
        .catch(err => {
          console.error('获取风格分类失败', err);
          uni.showToast({
            title: '获取风格分类失败，请重试',
            icon: 'none'
          });
        });
    },
    
    // 加载风格数据
    loadStyles() {
      uni.showLoading({
        title: '加载风格中...'
      });
      
      styleApi.getAllStyles({ page: 1, size: 100 })
        .then(res => {
          if (res.code === 200) {
            // 将风格数据转换为前端需要的格式
            this.styles = res.data.list.map(style => {
              return {
                id: style.id,
                categoryId: style.category,
                name: style.name,
                previewImage: style.previewImage || style.imageUrl,
                description: style.description
              };
            });
          } else {
            throw new Error(res.message || '获取风格失败');
          }
        })
        .catch(err => {
          console.error('获取风格失败', err);
          uni.showToast({
            title: '获取风格失败，请重试',
            icon: 'none'
          });
        })
        .finally(() => {
          uni.hideLoading();
        });
    },
    
    // 加载热门组合
    loadPopularCombinations() {
      styleApi.getPopularCombinations()
        .then(res => {
          if (res.code === 200) {
            // 直接使用后端返回的styleIds字段
            this.popularCombinations = res.data.map(combo => {
              return {
                id: combo.id,
                name: combo.name,
                styleIds: combo.styleIds || [], // 使用后端返回的styleIds
                useCount: combo.useCount || 0
              };
            });
          } else {
            throw new Error(res.message || '获取热门组合失败');
          }
        })
        .catch(err => {
          console.error('获取热门组合失败', err);
          uni.showToast({
            title: '获取热门组合失败，请重试',
            icon: 'none'
          });
        });
    },
    
    // 选择单图
    chooseSingleImage() {
      uni.chooseImage({
        count: 1,
        sizeType: ['original', 'compressed'],
        sourceType: ['album', 'camera'],
        success: (res) => {
          this.singleImageUrl = res.tempFilePaths[0];
        }
      });
    },
    
    // 选择专辑图片
    chooseAlbumImages() {
      uni.chooseImage({
        count: 9,
        sizeType: ['original', 'compressed'],
        sourceType: ['album', 'camera'],
        success: (res) => {
          // 添加新选择的图片到列表中，默认不应用AI处理
          const newImages = res.tempFilePaths.map(url => ({ 
            tempUrl: url, 
            applyAI: false 
          }));
          
          this.albumImages = this.albumImages.concat(newImages);
          
          // 如果这是第一次添加图片，设置当前选中的图片
          if (this.albumImages.length > 0 && !this.currentAlbumImage) {
            this.selectAlbumImage(0);
          }
          
          // 重置之前的生成结果
          this.taskId = '';
          this.batchTaskId = '';
          this.taskStatus = '';
          this.resultImageUrl = '';
          this.resultImageUrls = [];
        }
      });
    },
    
    // 切换风格选择状态
    toggleStyle(styleId) {
      const index = this.selectedStyles.indexOf(styleId);
      if (index > -1) {
        this.selectedStyles.splice(index, 1);
      } else {
        this.selectedStyles.push(styleId);
      }
    },
    
    // 根据风格ID获取风格名称
    getStyleName(styleId) {
      const style = this.styles.find(s => s.id === styleId);
      return style ? style.name : '未知风格';
    },
    
    // 应用推荐组合
    applyCombo(combo) {
      this.selectedComboId = combo.id;
      this.selectedStyles = [...combo.styleIds];
    },
    
    // 根据风格ID加载风格
    loadStyleById(styleId) {
      uni.showLoading({
        title: '加载风格中...'
      });
      
      styleApi.getStyleDetail(styleId)
        .then(res => {
          if (res.code === 200) {
            const styleData = res.data;
            console.log('加载到风格数据:', styleData);
            
            // 直接选择该风格
            if (!this.selectedStyles.includes(styleData.id)) {
              this.selectedStyles.push(styleData.id);
              
              // 如果该风格不在当前已加载的风格列表中，添加它
              const existingStyle = this.styles.find(s => s.id === styleData.id);
              if (!existingStyle) {
                // 确定分类ID
                let categoryId = 5; // 默认为自定义分类
                if (styleData.type === 1) {
                  categoryId = 1;
                } else if (styleData.type === 2) {
                  categoryId = 2;
                }
                
                // 添加到风格列表
                this.styles.push({
                  id: styleData.id,
                  categoryId: categoryId,
                  name: styleData.name,
                  previewUrl: styleData.previewUrl || styleData.imageUrl,
                  description: styleData.description
                });
                
                // 切换到对应的分类
                this.currentCategory = categoryId;
              } else {
                // 如果已存在，切换到对应的分类
                this.currentCategory = existingStyle.categoryId;
              }
              
              uni.showToast({
                title: `已选择"${styleData.name}"风格`,
                icon: 'none'
              });
            }
          } else {
            throw new Error(res.msg || '加载风格失败');
          }
        })
        .catch(err => {
          console.error('加载风格失败', err);
          uni.showToast({
            title: '加载风格失败，请重试',
            icon: 'none'
          });
        })
        .finally(() => {
          uni.hideLoading();
        });
    },
    
    // 选择专辑图片
    selectAlbumImage(index) {
      this.currentAlbumIndex = index;
      this.currentAlbumImage = this.albumImages[index];
    },
    
    // 删除专辑图片
    removeAlbumImage(index) {
      this.albumImages.splice(index, 1);
      
      // 如果删除后列表为空，清空当前选中的图片
      if (this.albumImages.length === 0) {
        this.currentAlbumImage = null;
        this.currentAlbumIndex = 0;
      } 
      // 如果删除的是当前选中的图片，则选择下一张或前一张
      else if (index === this.currentAlbumIndex) {
        // 如果删除的是最后一张，选择新的最后一张
        if (index >= this.albumImages.length) {
          this.selectAlbumImage(this.albumImages.length - 1);
        } else {
          // 否则选择相同位置的图片（现在是新的图片）
          this.selectAlbumImage(index);
        }
      } 
      // 如果删除的图片索引小于当前选中的索引，需要更新当前索引
      else if (index < this.currentAlbumIndex) {
        this.currentAlbumIndex--;
        this.currentAlbumImage = this.albumImages[this.currentAlbumIndex];
      }
    },
    
    // 生成单图
    generateSingleImage() {
      if (this.selectedStyles.length === 0) {
        uni.showToast({
          title: '请至少选择一个风格',
          icon: 'none'
        });
        return;
      }
      
      this.isGenerating = true;
      
      // 获取需要处理的图片路径
      const imagePath = this.singleImageUrl;
      
      // 上传图片到服务器
      imageApi.uploadImage(imagePath)
        .then(res => {
          // 提交风格转换任务
          return taskApi.submitStyleTask({
            imageUrl: res.data.imageUrl,
            styleIds: this.selectedStyles,
            intensity: 100 // 默认强度
          });
        })
        .then(res => {
          if (res.code === 200) {
            this.taskId = res.data.taskId;
            this.taskStatus = 'waiting';
            
            // 开始轮询任务状态
            this.pollTaskStatus();
          } else {
            throw new Error(res.message || '创建任务失败');
          }
        })
        .catch(err => {
          console.error('生成失败', err);
          uni.showToast({
            title: err.message || '生成失败，请重试',
            icon: 'none'
          });
          this.isGenerating = false;
        });
    },
    
    // 轮询任务状态
    pollTaskStatus() {
      if (!this.taskId) return;
      
      const timer = setInterval(() => {
        taskApi.getTaskStatus(this.taskId)
          .then(res => {
            if (res.code === 200) {
              this.taskStatus = res.data.status;
              
              if (this.taskStatus === 'completed') {
                this.resultImageUrl = res.data.resultUrl;
                this.isGenerating = false;
                clearInterval(timer);
                
                // 显示成功提示
                uni.showToast({
                  title: '生成成功',
                  icon: 'success'
                });
              } else if (this.taskStatus === 'failed') {
                uni.showToast({
                  title: res.data.errorMessage || '生成失败，请重试',
                  icon: 'none'
                });
                this.isGenerating = false;
                clearInterval(timer);
              }
            } else {
              throw new Error(res.message || '获取任务状态失败');
            }
          })
          .catch(err => {
            console.error('获取任务状态失败', err);
            clearInterval(timer);
            this.isGenerating = false;
            
            uni.showToast({
              title: err.message || '获取任务状态失败',
              icon: 'none'
            });
          });
      }, 2000); // 每2秒查询一次
    },
    
    // 获取状态文本
    getStatusText() {
      switch(this.taskStatus) {
        case 'waiting':
          return '等待中...';
        case 'processing':
          return '生成中...';
        case 'completed':
          return '生成完成';
        case 'failed':
          return '生成失败';
        default:
          return '';
      }
    },
    
    // 获取进度百分比
    getProgressPercent() {
      switch(this.taskStatus) {
        case 'waiting':
          return 30;
        case 'processing':
          return 70;
        case 'completed':
          return 100;
        case 'failed':
          return 0;
        default:
          return 0;
      }
    },
    
    // 保存到相册
    saveToAlbum() {
      if (!this.resultImageUrl) return;
      
      uni.saveImageToPhotosAlbum({
        filePath: this.resultImageUrl,
        success: () => {
          uni.showToast({
            title: '已保存到相册'
          });
        },
        fail: () => {
          uni.showToast({
            title: '保存失败，请重试',
            icon: 'none'
          });
        }
      });
    },
    
    // 分享图片
    shareImage() {
      if (!this.resultImageUrl) return;
      
      // 生成分享海报
      feedApi.generateSharePoster({
        artworkId: this.taskId
      })
        .then(res => {
          if (res.code === 200) {
            uni.share({
              provider: 'weixin',
              scene: 'WXSceneSession',
              type: 2,
              imageUrl: res.data.posterUrl,
              success: function() {
                uni.showToast({
                  title: '分享成功'
                });
              },
              fail: function() {
                uni.showToast({
                  title: '分享失败',
                  icon: 'none'
                });
              }
            });
          } else {
            throw new Error(res.message || '生成海报失败');
          }
        })
        .catch(err => {
          console.error('分享失败', err);
          uni.showToast({
            title: err.message || '分享失败，请重试',
            icon: 'none'
          });
        });
    },
    
    // 预览专辑
    previewAlbum() {
      // 获取所有图片的URL，包括原图和处理后的图片
      const previewUrls = [];
      
      // 添加所有原图
      this.albumImages.forEach(image => {
        previewUrls.push(image.tempUrl);
      });
      
      // 添加所有处理后的图片（如果有）
      if (this.resultImageUrls.length > 0) {
        this.resultImageUrls.forEach(url => {
          previewUrls.push(url);
        });
      } else if (this.resultImageUrl) {
        previewUrls.push(this.resultImageUrl);
      }
      
      // 使用uni.previewImage预览图片
      uni.previewImage({
        urls: previewUrls,
        current: 0
      });
    },
    
    // 显示保存专辑确认弹窗
    saveAlbum() {
      // 检查是否有图片
      if (this.albumImages.length === 0) {
        uni.showToast({
          title: '请先添加图片',
          icon: 'none'
        });
        return;
      }
      
      // 显示保存确认弹窗
      this.showSaveAlbumForm = true;
    },
    
    // 确认保存专辑
    submitSaveAlbum() {
      uni.showLoading({
        title: '保存中...'
      });
      
      // 准备要保存的图片URL
      const imageUrls = [];
      
      // 添加所有原图
      const uploadTasks = this.albumImages.map(image => {
        // 如果图片已经上传过（有远程URL），直接使用
        if (image.remoteUrl) {
          return Promise.resolve({ data: { imageUrl: image.remoteUrl } });
        }
        // 否则上传图片
        return imageApi.uploadImage(image.tempUrl);
      });
      
      // 执行所有上传任务
      Promise.all(uploadTasks)
        .then(results => {
          // 收集所有图片URL
          results.forEach(res => {
            imageUrls.push(res.data.imageUrl);
          });
          
          // 添加所有处理后的图片URL（如果有）
          if (this.resultImageUrls.length > 0) {
            this.resultImageUrls.forEach(url => {
              imageUrls.push(url);
            });
          } else if (this.resultImageUrl) {
            imageUrls.push(this.resultImageUrl);
          }
          
          // 保存专辑，使用表单中的数据
          // 将isPublic布尔值转换为整数值（1表示true，0表示false）
          return imageApi.saveAlbum({
            imageUrls: imageUrls,
            title: this.albumForm.title,
            description: this.albumForm.description,
            isPublic: this.albumForm.isPublic ? 1 : 0  // 将布尔值转换为整数
          });
        })
        .then(res => {
          if (res.code === 200) {
            uni.showToast({
              title: '专辑保存成功'
            });
            
            // 隐藏保存表单
            this.showSaveAlbumForm = false;
            
            // 清空图片数据
            this.albumImages = [];
            this.currentAlbumImageIndex = -1;
            this.currentAlbumImage = null;
            this.resultImageUrls = [];
            this.resultImageUrl = '';
            
            // 重置表单数据，为下次使用准备
            this.albumForm = {
              title: '我的AI风格专辑',
              description: '使用AI风格转换创建的图片专辑',
              isPublic: true
            };
            
          } else {
            throw new Error(res.message || '保存专辑失败');
          }
        })
        .catch(err => {
          console.error('保存专辑失败', err);
          uni.showToast({
            title: err.message || '保存专辑失败，请重试',
            icon: 'none'
          });
        })
        .finally(() => {
          uni.hideLoading();
        });
    }
  }
}
</script>

<style>
.create-container {
  padding: 20rpx;
}

/* 模式选择区域样式 */
.mode-selector {
  display: flex;
  justify-content: space-around;
  margin-bottom: 30rpx;
}

.mode-item {
  padding: 15rpx 30rpx;
  font-size: 28rpx;
  color: #666;
  background-color: #f8f8f8;
  border-radius: 30rpx;
}

.mode-item.mode-active {
  background-color: #FF69B4;
  color: #fff;
}

.mode-icon {
  font-size: 36rpx;
  margin-right: 10rpx;
}

/* 单图模式样式 */
.upload-area {
  margin-bottom: 30rpx;
}

.upload-title {
  font-size: 36rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
  color: #333;
}

.upload-box {
  width: 100%;
  height: 400rpx;
  background-color: #f8f8f8;
  border: 2rpx dashed #ddd;
  border-radius: 12rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.upload-icon {
  font-size: 80rpx;
  color: #ccc;
  margin-bottom: 20rpx;
}

.upload-text {
  font-size: 28rpx;
  color: #999;
}

.upload-desc {
  font-size: 24rpx;
  color: #666;
  margin-top: 10rpx;
}

.image-preview {
  margin-bottom: 30rpx;
}

.preview-image {
  width: 100%;
  height: 400rpx;
  border-radius: 12rpx;
}

.preview-actions {
  display: flex;
  justify-content: space-around;
  margin-top: 20rpx;
}

.action-btn {
  background-color: #FFB6C1;
  color: #fff;
  font-size: 28rpx;
  padding: 10rpx 30rpx;
  border-radius: 30rpx;
}

.action-btn.delete-btn {
  background-color: #FF69B4;
}

/* 风格选择区域样式 */
.style-area {
  margin-top: 40rpx;
}

.style-title {
  font-size: 36rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
  color: #333;
}

.style-tabs {
  white-space: nowrap;
  margin-bottom: 30rpx;
}

.tab-item {
  display: inline-block;
  padding: 15rpx 30rpx;
  margin-right: 20rpx;
  font-size: 28rpx;
  color: #666;
  background-color: #f5f5f5;
  border-radius: 30rpx;
}

.tab-item.active {
  background-color: #FF69B4;
  color: #fff;
}

.style-list {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 30rpx;
}

.style-item {
  width: 30%;
  margin: 1.5%;
  background-color: #f5f5f5;
  border-radius: 10rpx;
  overflow: hidden;
  position: relative;
}

.style-item.selected {
  border: 2rpx solid #FF69B4;
}

.style-preview {
  width: 100%;
  height: 150rpx;
  display: block;
}

.style-name {
  padding: 10rpx;
  font-size: 24rpx;
  color: #333;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.selected-styles {
  margin-bottom: 30rpx;
}

.selected-title {
  font-size: 30rpx;
  color: #333;
  margin-bottom: 15rpx;
}

.selected-list {
  display: flex;
  flex-wrap: wrap;
}

.selected-style {
  display: flex;
  align-items: center;
  padding: 10rpx 20rpx;
  margin: 10rpx;
  font-size: 26rpx;
  color: #fff;
  background-color: #FF69B4;
  border-radius: 30rpx;
}

.remove-style {
  margin-left: 10rpx;
  font-size: 30rpx;
}

.popular-combinations {
  margin-bottom: 40rpx;
}

.popular-title {
  font-size: 30rpx;
  color: #333;
  margin-bottom: 15rpx;
}

.combinations-list {
  white-space: nowrap;
}

.combo-item {
  display: inline-block;
  padding: 15rpx 25rpx;
  margin-right: 20rpx;
  background-color: #f8f8f8;
  border-radius: 10rpx;
  border: 1rpx solid #eee;
}

.combo-item-active {
  background-color: #FF69B4;
  color: #fff;
}

.combo-name {
  font-size: 26rpx;
  color: #333;
}

.combo-count {
  font-size: 22rpx;
  color: #999;
  margin-top: 5rpx;
}

.combo-selected {
  font-size: 22rpx;
  color: #fff;
  margin-top: 5rpx;
}

.generate-area {
  margin: 40rpx 0;
}

.generate-btn {
  background-color: #FF69B4;
  color: #fff;
  font-size: 32rpx;
  padding: 20rpx 0;
  border-radius: 40rpx;
}

.generate-btn[disabled] {
  background-color: #ccc;
}

/* 专辑模式样式 */
.image-album {
  margin-bottom: 30rpx;
}

.album-title {
  font-size: 36rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
  color: #333;
}

.album-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.album-item {
  width: 30%;
  margin: 1.5%;
  background-color: #f5f5f5;
  border-radius: 10rpx;
  overflow: hidden;
  position: relative;
  height: 200rpx;
}

.album-item-active {
  border: 2rpx solid #FF69B4;
}

.album-image {
  width: 100%;
  height: 200rpx;
  display: block;
}

.album-item-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
}

.album-item-selected {
  font-size: 36rpx;
}

.album-item-number {
  position: absolute;
  top: 10rpx;
  left: 10rpx;
  font-size: 24rpx;
  color: #fff;
}

.album-item-delete {
  position: absolute;
  top: 10rpx;
  right: 10rpx;
  font-size: 24rpx;
  color: #FF69B4;
}

.album-add {
  width: 30%;
  margin: 1.5%;
  height: 200rpx;
  background-color: #f5f5f5;
  border-radius: 10rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: 2rpx dashed #ddd;
}

.add-icon {
  font-size: 80rpx;
  color: #ccc;
  margin-bottom: 20rpx;
}

.add-text {
  font-size: 28rpx;
  color: #999;
}

.current-preview {
  margin-bottom: 30rpx;
}

.preview-image {
  width: 100%;
  height: 400rpx;
  border-radius: 12rpx;
}

.preview-actions {
  display: flex;
  justify-content: space-around;
  margin-top: 20rpx;
}

.action-btn {
  background-color: #FFB6C1;
  color: #fff;
  font-size: 28rpx;
  padding: 10rpx 30rpx;
  border-radius: 30rpx;
}

.action-btn.delete-btn {
  background-color: #FF69B4;
}

.album-actions {
  margin-top: 30rpx;
  display: flex;
  justify-content: space-around;
  padding: 20rpx;
  background-color: #f8f8f8;
  border-radius: 12rpx;
}

.album-btn {
  width: 45%;
  height: 80rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 40rpx;
  font-size: 28rpx;
  color: #fff;
  border: none;
}

.album-btn.preview {
  background: linear-gradient(to right, #FFB6C1, #FF69B4);
}

.album-btn.save {
  background: linear-gradient(to right, #FF69B4, #FF1493);
}

.btn-icon {
  margin-right: 10rpx;
  font-size: 32rpx;
}

.btn-text {
  font-weight: bold;
}

/* 保存专辑弹窗样式 */
.save-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal-content {
  width: 80%;
  background-color: #fff;
  border-radius: 12rpx;
  overflow: hidden;
}

.modal-header {
  padding: 30rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1rpx solid #f5f5f5;
}

.modal-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}

.modal-close {
  font-size: 40rpx;
  color: #999;
}

.modal-body {
  padding: 30rpx;
}

.form-item {
  margin-bottom: 30rpx;
}

.form-label {
  display: block;
  font-size: 30rpx;
  color: #333;
  margin-bottom: 15rpx;
}

.form-input {
  width: 100%;
  height: 80rpx;
  border: 1rpx solid #eee;
  border-radius: 8rpx;
  padding: 0 20rpx;
  font-size: 28rpx;
  box-sizing: border-box;
}

.form-textarea {
  width: 100%;
  height: 200rpx;
  border: 1rpx solid #eee;
  border-radius: 8rpx;
  padding: 20rpx;
  font-size: 28rpx;
  box-sizing: border-box;
}

.modal-footer {
  padding: 20rpx 30rpx;
  display: flex;
  justify-content: flex-end;
  border-top: 1rpx solid #f5f5f5;
}

.modal-btn {
  padding: 15rpx 40rpx;
  border-radius: 40rpx;
  font-size: 28rpx;
  margin-left: 20rpx;
  background-color: #f5f5f5;
  color: #666;
}

.modal-btn.primary {
  background-color: #FF69B4;
  color: #fff;
}

/* 任务进度样式 */
.task-progress {
  margin-top: 40rpx;
}

.progress-title {
  font-size: 36rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
  color: #333;
}

.progress-status {
  margin-bottom: 30rpx;
}

.status-text {
  font-size: 28rpx;
  color: #666;
  margin-bottom: 15rpx;
  display: block;
}

.result-preview {
  margin-top: 40rpx;
}

.result-title {
  font-size: 36rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
  color: #333;
}

.result-image {
  width: 100%;
}

.result-image image {
  width: 100%;
  height: 400rpx;
  border-radius: 12rpx;
}

.result-actions {
  display: flex;
  justify-content: space-around;
  margin-top: 30rpx;
}
</style>
